<template>
  <div class="modal fade" id="selfRolwAuthTemp" tabindex="-1" role="dialog" aria-labelledby="roleAuthorizedModel" aria-hidden="true">
    <div class="modal-dialog" style="width: 800px;">
      <div class="modal-content" style="margin-top: 25px;">
        <div class="modal-header">
          <button type="button" class="close" @click="closeSelfRoleAuthModal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">角色授权【{{this.currentRoleName}}】</h4>
        </div>
        <div style="padding: 10px;padding-bottom: 0;">
          <Tabs type="card">
            <TabPane label="web端">
              <div class="main-content selfRolwAuthTemp" :style="{'height':clientHeight + 'px','overflow-y': 'scroll'}">
                <ul style="margin-bottom: 80px;">
                  <li class="floor1" v-for="(n,index) in nodes" :key="index" :class="n.subNodes.length==0?'icon_stance':''">
                    <Icon v-if="n.subNodes.length>0 && n.show" @click="n.show = n.show==true?false:true" type="ios-arrow-down" />
                    <Icon v-if="n.subNodes.length>0 && !n.show" @click="n.show = n.show==true?false:true" type="ios-arrow-forward" />
                    <Checkbox v-model="n.selected" size="small" @on-change="(e)=>{changeResources(e,n.subNodes)}">{{n.name}}</Checkbox>
                    <ul v-if="n.subNodes.length>0" v-show="n.show">
                      <li v-for="(f1,index) in n.subNodes" :key="index" :class="f1.subNodes.length==0?'icon_stance':''">
                        <Icon v-if="f1.subNodes.length>0 && f1.show" @click="f1.show = f1.show==true?false:true" type="ios-arrow-down" />
                        <Icon v-if="f1.subNodes.length>0 && !f1.show" @click="f1.show = f1.show==true?false:true" type="ios-arrow-forward" />
                        <Checkbox v-model="f1.selected" size="small" @on-change="(e)=>{changeResources(e,f1.subNodes,n)}">{{f1.name}}</Checkbox>
                        <ul v-if="f1.subNodes.length > 0" v-show="f1.show">
                          <li class="floor3 mult-sub" v-for="(f2,index) in f1.subNodes" :key="index" :class="f2.subNodes.length==0?'icon_stance':''">
                            <Icon v-if="f2.subNodes.length>0" @click="showSubDiv($event)" type="ios-arrow-down" />
                            <Checkbox v-model="f2.selected" size="small" @on-change="(e)=>{changeResources(e,f2.subNodes,n,f1)}">{{f2.name}}</Checkbox>
                            <ul class="sub-div" v-if="f2.subNodes.length>0" v-show="f2.show">
                              <li v-for="(f3,index) in f2.subNodes" :key="index">
                                <Checkbox v-model="f3.selected" @on-change="(e)=>{changeResources(e,f3.subNodes,n,f2,f3)}" size="small">{{f3.name}}</Checkbox>
                              </li>
                            </ul>
                          </li>
                          <div class="clearfix"></div>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
                <div class="role-bottom">
                  <div class="opBtn">
                    <span @click="selectAll(1)">全部选择</span>
                    <span @click="cancleAll(1)">全部取消</span>
                    <span @click="reusePermission">复用权限</span>
                  </div>
                  <button type="button" class="btn checkedBtn surBtn" v-show="btnShow" @click="saveRole(1)">确定</button>
                </div>
              </div>
            </TabPane>
            <TabPane label="移动端">
              <div class="main-content selfRolwAuthTemp" :style="{'height':clientHeight + 'px','overflow-y': 'scroll'}">
                <ul style="margin-bottom: 80px;">
                  <li class="floor1" v-for="(n,index) in h5Nodes" :key="index" :class="n.subNodes.length==0?'icon_stance':''">
                    <Icon v-if="n.subNodes.length>0 && n.show" @click="n.show = n.show==true?false:true" type="ios-arrow-down" />
                    <Icon v-if="n.subNodes.length>0 && !n.show" @click="n.show = n.show==true?false:true" type="ios-arrow-forward" />
                    <Checkbox v-model="n.selected" size="small" @on-change="(e)=>{changeResources(e,n.subNodes,null)}">{{n.name}}</Checkbox>
                    <ul v-if="n.subNodes.length>0" v-show="n.show">
                      <li v-for="(f1,index) in n.subNodes" :key="index" :class="f1.subNodes.length==0?'icon_stance':''">
                        <Icon v-if="f1.subNodes.length>0 && f1.show" @click="f1.show = f1.show==true?false:true" type="ios-arrow-down" />
                        <Icon v-if="f1.subNodes.length>0 && !f1.show" @click="f1.show = f1.show==true?false:true" type="ios-arrow-forward" />
                        <Checkbox v-model="f1.selected" size="small" @on-change="(e)=>{changeResources(e,f1.subNodes,n)}">{{f1.name}}</Checkbox>
                        <ul v-if="f1.subNodes.length > 0" v-show="f1.show">
                          <li class="floor3 mult-sub" v-for="(f2,index) in f1.subNodes" :key="index" :class="f2.subNodes.length==0?'icon_stance':''">
                            <Icon v-if="f2.subNodes.length>0" @click="showSubDiv($event)" type="ios-arrow-down" />
                            <Checkbox v-model="f2.selected" size="small" @on-change="(e)=>{changeResources(e,f2.subNodes,n,f1)}">{{f2.name}}</Checkbox>
                            <ul class="sub-div" v-if="f2.subNodes.length>0" v-show="f2.show">
                              <li v-for="(f3,index) in f2.subNodes" :key="index">
                                <Checkbox v-model="f3.selected" size="small" @on-change="(e)=>{changeResources(e,f3.subNodes,n,f2,f3)}">{{f3.name}}</Checkbox>
                              </li>
                            </ul>
                          </li>
                          <div class="clearfix"></div>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
                <div class="role-bottom">
                  <div class="opBtn">
                    <span @click="selectAll(2)">全部选择</span>
                    <span @click="cancleAll(2)">全部取消</span>
                    <span @click="reusePermission">复用权限</span>
                  </div>
                  <button type="button" class="btn checkedBtn surBtn" v-show="btnShow" @click="saveRole(2)">确定</button>
                </div>
              </div>
            </TabPane>
            <TabPane label="机构数据权限" :style="{'height':clientHeight + 'px'}">
              <selfRoleDeptPermission ref="selfRoleDeptPermission" @closeSelfRoleAuthModal='closeSelfRoleAuthModal'></selfRoleDeptPermission>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
    <selectRoleModal></selectRoleModal>
  </div>
</template>

<script>
import selectRoleModal from "./selectRoleModal.vue";
import selfRoleDeptPermission from "./selfRoleDeptPermission.vue";
export default {
  data() {
    return {
      clientHeight: 0,
      btnShow: true,
      nodes: [],
      h5Nodes: [],
      roleId: "",
      roleData: {},
      currentRoleName: "",
    };
  },
  components: {
    selectRoleModal,
    selfRoleDeptPermission,
  },
  watch: {
    "$store.getters.selectRoleInfo": {
      handler(val, oldVal) {
        if (val) {
          this.roleId = val.roleId || "";
          this.initTree(val);
        }
      },
      deep: true,
    },
  },
  mounted: function() {
    this.clientHeight = document.body.clientHeight - 180;
    this.initTree();
  },
  methods: {
    selectAll(type) {
      var _self = this;
      var nodes = [];
      if (type == 1) {
        nodes = _self.nodes;
      } else if (type == 2) {
        nodes = _self.h5Nodes;
      }

      for (var i in nodes) {
        let n = nodes[i];
        if (!n.selected) {
          n.selected = true;
        }
        if (n.subNodes.length > 0) {
          for (var j in n.subNodes) {
            let f1 = n.subNodes[j];
            if (!f1.selected) {
              f1.selected = true;
            }
            if (f1.subNodes.length > 0) {
              for (var k in f1.subNodes) {
                let f2 = f1.subNodes[k];
                if (!f2.selected) {
                  f2.selected = true;
                }
                if (f2.subNodes.length > 0) {
                  for (const ii in f2.subNodes) {
                    let f3 = f2.subNodes[ii];
                    if (!f3.selected) {
                      f3.selected = true;
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    cancleAll(type) {
      var _self = this;
      var nodes = [];
      if (type == 1) {
        nodes = _self.nodes;
      } else if (type == 2) {
        nodes = _self.h5Nodes;
      }
      for (var i in nodes) {
        let n = nodes[i];
        if (n.selected) {
          n.selected = false;
        }
        if (n.subNodes.length > 0) {
          for (var j in n.subNodes) {
            let f1 = n.subNodes[j];
            if (f1.selected) {
              f1.selected = false;
            }
            if (f1.subNodes.length > 0) {
              for (var k in f1.subNodes) {
                let f2 = f1.subNodes[k];
                if (f2.selected) {
                  f2.selected = false;
                }
                if (f2.subNodes.length > 0) {
                  for (const ii in f2.subNodes) {
                    let f3 = f2.subNodes[ii];
                    if (f3.selected) {
                      f3.selected = false;
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    reusePermission() {
      //记录复用前的角色id
      if(this.$store.getters.selectOldRoleInfo.oldRoleId === '' || this.$store.getters.selectOldRoleInfo.oldRoleId == undefined){
          this.$store.commit("set_selectOldRoleInfo", {
            oldRoleId: this.$store.getters.selectRoleInfo.roleId,
            oldRoleName: this.$store.getters.selectRoleInfo.roleName,
          });
      }
      $("#selectRoleModal").modal({
        backdrop: "static",
        keyboard: false,
        show: true,
      });
    },
    initTree: function(roleInfo) {
      if (roleInfo) {
        var _self = this;
        //ztree基础属性设置 /*,chkDisabledInherit: true*/
        var setting = {
          check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { Y: "ps", N: "s" },
          },
          data: {
            simpleData: { enable: true },
          },
        };
        var url =
          _self.utilHelper.apiUrl + "/api/getAuthorizeRoleListForDevelop";
        var params = {
          roleId: roleInfo.roleId,
          resourcesOrigin: "1",
          oldRoleId: this.$store.getters.selectOldRoleInfo.oldRoleId,
        };
        var body = {};
        body.params = params;
        _self.$http.post(url, body).then((response) => {
          var resData = response.body.resData;
          var nodeList = resData.nodeList;
          _self.nodes = resData.nodeList;
          _self.h5Nodes = resData.h5List;
          _self.roleData = resData.roleCaseMemberDto;
          this.$refs.selfRoleDeptPermission.setDataShow(_self.roleData);
        });
      }
      let olddRoleName  = this.$store.getters.selectOldRoleInfo.oldRoleName
      this.currentRoleName = olddRoleName != null ? olddRoleName : this.$store.getters.selectRoleInfo.roleName;
    },
    saveRole() {
      var _self = this;
      var aus = "";
      var h5Aus = "";
      var nodes = [];
      var h5Nodes = [];
      var oldRoledId = _self.$store.getters.selectOldRoleInfo.oldRoleId;
      var roleId = oldRoledId != null ? oldRoledId : _self.roleId;
      nodes = _self.nodes;
      h5Nodes = _self.h5Nodes;
      aus = _self.getNodesVal(nodes);
      h5Aus = _self.getNodesVal(h5Nodes);
      if (aus.length > 0) aus = aus.substring(0, aus.length - 1);
      if (h5Aus.length > 0) h5Aus = h5Aus.substring(0, h5Aus.length - 1);
      var params = {
        merchantId: "",
        // roleId: _self.$store.getters.selectRoleInfo.roleId,
        //roleId: _self.roleId,
        roleId: roleId,
        resourcesList: [aus, h5Aus],
      };
      var body = {};
      body.params = params;
      _self.btnShow = false;
      var url = _self.utilHelper.apiUrl + "/api/dp/authorizeRole";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == "1") {
          layer.msg(
            "授权成功!",
            {
              time: 1000,
            },
            function() {
              _self.btnShow = true;
              _self.closeSelfRoleAuthModal();
            }
          );
        } else {
          layer.alert("系统异常!");
          _self.btnShow = true;
        }
      });
    },
    getNodesVal(nodes) {
      var aus = "";
      //获取添加的新增的数据
      for (var i in nodes) {
        let n = nodes[i];
        if (n.selected) {
          aus += n.id + ",";
        }
        if (n.subNodes.length > 0) {
          for (var j in n.subNodes) {
            let f1 = n.subNodes[j];
            if (f1.selected) {
              aus += f1.id + ",";
            }
            if (f1.subNodes.length > 0) {
              for (var k in f1.subNodes) {
                let f2 = f1.subNodes[k];
                if (f2.selected) {
                  aus += f2.id + ",";
                }
                if (f2.subNodes.length > 0) {
                  for (const ii in f2.subNodes) {
                    let f3 = f2.subNodes[ii];
                    if (f3.selected) {
                      aus += f3.id + ",";
                    }
                  }
                }
              }
            }
          }
        }
      }
      return aus;
    },
    changeResources: function(flag, nodes, ...n) {
      var _self = this;
      if (n != null && n.length > 0 && flag == true) {
        for (var j in n) {
          if (n[j] == null) {
            continue;
          }
          n[j].selected = flag;
        }
      }
      for (var i in nodes) {
        nodes[i].selected = flag;
        if (nodes[i].subNodes.length > 0) {
          _self.changeResources(flag, nodes[i].subNodes, null);
        }
      }
    },
    showSubDiv(event) {
      var subs = document.getElementsByClassName("sub-div");
      for (var i = 0; i < subs.length; i++) {
        if (subs[i] != event.srcElement.nextElementSibling.nextElementSibling) {
          subs[i].style.display = "none";
        } else {
          if (
            event.srcElement.nextElementSibling.nextElementSibling.style
              .display == "none" ||
            !event.srcElement.nextElementSibling.nextElementSibling.style
              .display
          ) {
            event.srcElement.nextElementSibling.nextElementSibling.style.display =
              "block";
          } else {
            event.srcElement.nextElementSibling.nextElementSibling.style.display =
              "none";
          }
        }
      }
      // document.getElementsByClassName("sub-div").style.display = 'none';
      // e.nextElement.nextElement.style.display = 'block';
    },
    closeSelfRoleAuthModal() {
      this.$store.commit("set_selectRoleInfo", "");
      this.$store.commit("set_selectOldRoleInfo", "");
      $("#selfRolwAuthTemp").modal("hide");
    },
  },
};
</script>

<style scoped>
ul,
li {
  margin-left: 10px;
}
label {
  font-weight: normal;
}
.floor3 {
  float: left;
}
.mult-sub {
  position: relative;
}
.sub-div {
  position: absolute;
  left: -10px;
  min-width: 80px;
  border: 1px solid #eaeaea;
  background: #fff;
  display: none;
  border-radius: 3px;
  z-index: 50;
}
.sub-line {
  width: 15px;
  height: 14px;
  border-left: 1px solid #bbbbbb;
  border-bottom: 1px solid #bbbbbb;
  float: left;
}
.icon_stance {
  margin-left: 25px;
}
.role-bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  text-align: right;
  padding: 10px;
  border-top: 1px solid #e5e5e5;
  background: #fff;
}
.ivu-tabs
  .ivu-tabs-bar
  .ivu-tabs-nav-wrap
  .ivu-tabs-nav-scroll
  .ivu-tabs-nav
  .ivu-tabs-tab {
  width: 380px;
  text-align: center;
}
.surBtn {
  width: 120px;
  height: 36px;
}
.opBtn {
  color: #eb6111;
  font-size: 14px;
  margin: 7px;
  float: left;
}
.opBtn span {
  padding: 10px;
  cursor: pointer;
}
</style>